<template>
    <div class="project">
      <!-- 设备状态统计  -->
      <div class="wrapper">
        <div class="wb_header">
          <div>设备状态统计</div>
        </div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="项目" name="first"></el-tab-pane>
          <el-tab-pane label="产品" name="second"></el-tab-pane>
          <el-tab-pane label="设备离线率" name="third"></el-tab-pane> 
        </el-tabs> 
        <div class="warp warp1 warp2">
        <el-form :inline="true" :model="queryFrom" class="demo-form-inline">
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择">
              <el-option label="普适型品类" value="shanghai"></el-option> 
              <el-option label="综合型品类" value="shanghai"></el-option> 
              <el-option label="监测辅助设备" value="shanghai"></el-option> 
            </el-select>
          </el-form-item> 
          <el-form-item label=""> 
            <el-button type="primary" size="small" plain>导出</el-button>
          </el-form-item>
        </el-form>
      </div>
        <el-table v-loading="loading" :data="configList">   
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="项目名称" align="center" prop="projectName" />
          <el-table-column label="设备总数" width="140" align="center" prop="devSum" :show-overflow-tooltip="true" />
          <el-table-column label="在线设备" width="140" align="center" prop="devOnline" :show-overflow-tooltip="true" />
          <el-table-column label="掉线设备" align="center" prop="devOffline" :show-overflow-tooltip="true" />
          <el-table-column label="禁用设备" width="140" align="center" prop="devOffstream" :show-overflow-tooltip="true" />
          <el-table-column label="未激活设备" width="140" align="center" prop="devUnactivated" :show-overflow-tooltip="true" />
          <el-table-column label="维护中设备" align="center" prop="equipmentUnderMaintenance" :show-overflow-tooltip="true" />  
          <el-table-column label="维护结束设备" align="center" prop="equipmentEndMaintenance" :show-overflow-tooltip="true" />  
          <el-table-column label="设备在线率" align="center" prop="configKey" >
            <template slot-scope="scope">
              <div class="cell" v-if="scope.row.onlineRate">
                <el-progress :text-inside="true" :stroke-width="15" :color="colors" :percentage="scope.row.onlineRate"></el-progress>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <!-- <template slot-scope="scope"> -->
            <template> 
              <el-button size="mini" type="text">查看详情</el-button>   
            </template>
          </el-table-column>
        </el-table>   
        <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
      
      </div>
    </div>
  </template>
  
  <script>
  export default {
  data() {
    return {
      activeName: "first",
      queryFrom: {},
      loading: false,
      configList: [
          {"projectName":"常德市地灾监测项目","devSum":18,"devOnline":18,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":100},
          {"projectName":"常德省厅普适型监测项目","devSum":36,"devOnline":35,"devOffline":1,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":97.22},
          {"projectName":"湖南省石门县南北镇潘坪村雷家山滑坡","devSum":0,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null},
          {"projectName":"常德普适型地灾监测（1170）","devSum":499,"devOnline":435,"devOffline":64,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":87.17},
          {"projectName":"常德市澧县甘溪镇顺桥地灾监测项目","devSum":0,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null},
          {"projectName":"鼎城区2021年地质灾害普适型监测预警项目","devSum":37,"devOnline":35,"devOffline":2,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":94.59}
        ],
      total: 6,
      queryParams:{
        pageNum: 1,
        pageSize: 10,
      },
      devTypeList:[
        {label: "未激活",value: "0"},
        {label: "在线",value: "1"},
        {label: "离线",value: "2"},
        {label: "已禁用",value: "3"},
        {label: "维护中",value: "4"},
        {label: "维护结束",value: "5"}
      ],
      colors: [ 
        {color: '#f56c6c', percentage: 70},
        {color: '#e6a23c', percentage: 80},
        {color: '#67c23a', percentage: 95},
        {color: '#67c23a', percentage: 100}
      ]
    }
  },
  methods:{
    getList(){}, 
  }
  }
  </script>
  
  <style lang="scss" scoped>
  @import "~@/assets/styles/tablePage.scss";  
  .footer{
    div{
      margin-top: 10px;
      font-size: 15px;
      color: #303133;
    }
  }
  .input_inner_selct{
    width: 100px;
  }
  </style>